<template>
  <div id="body">
    <div id="head">
      <div id="head_top">
        <div id="head_top_right">
          <li>
            <el-dropdown>
              <span class="el-dropdown-link">
                亲，欢迎您!&nbsp;范文杰
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人主页</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>充值</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </div>
        <div id="head_top_left">
          <li class="daohang">
            <a href="#">联系客服</a>
          </li>
          <li class="daohang">
            <a href="#">售后服务</a>
          </li>
          <li class="daohang">
            <a href="/index">首页</a>
          </li>
        </div>
      </div>
      <div id="head_center">
        <el-button type="text" style="float:left;" title="更换头像" @click="changeImg">
          <img
            style="width:150px;height:150px;background-color:#d4cfcf;border-radius: 50%;"
            src="@/style/images/logo.png"
          />
        </el-button>

        <div class="info">
          <strong style="font-size:24px; float:left;">范文杰&nbsp;</strong>
          <el-button type="text" title="编辑资料" @click="editInfo">
            <i class="el-icon-edit"></i>
          </el-button>
          <br/>
          <div style="float:left;">
            <el-row>
              <el-col :span="14">
                  <span style="float:left;">真实姓名：范文杰</span>
              </el-col>
              <el-col :span="10">
                  性别：男
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                  <span style="float:left;">生日： 2020-01-09</span>
              </el-col>
              <el-col :span="10">
                  职务：班长
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                  <span style="float:left;">银行卡号：48930290238048053</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                  <span style="float:left;">电话号码：18024476085</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <span style="float:left;">邮箱：2941307179@qq.com</span></el-col>
            </el-row>
          </div>
        </div>
        <div style="float:left;width:100px;height:100px;margin-top:50px;margin-left:100px;font-size:24px;">
          余额
          <label style="color:red;">￥200.00</label>
        </div>
        <el-button
          round
          style="float:right;margin-right:200px;background-color:#d4cfcf;margin-top:50px;"
        >退出登录</el-button>
      </div>
    </div>

    <Center />
    <Lack />
  </div>
</template>

<script>
import "@/style/css/home.css";
import Center from "@/views/user/center.vue";
import Lack from "@/views/user/lackBook.vue";

export default {
  components: {
    Center,
    Lack
  },
  methods: {
    changeImg() {
      this.$store.dispatch("changeImg", false);
    },
    editInfo() {
      this.$store.dispatch("editInfo", false);
    }
  }
};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
#head_center {
  margin-left: 200px;
  width: 80%;
  margin-top: 20px;
  background-color: #fff;
}
.info {
  float: left;
  margin-left: 50px;
  margin-top: 10px;
}
.el-col{
  float:left;
}
</style>